<template>
	<el-tabs
		type="border-card"
		v-model="activeTab"
		class="demo-tabs"
		@tab-change="setCategory"
	>
		<el-tab-pane
			v-for="item in picCategory"
			:key="item.id"
			:name="item.id"
			:label="item.name"
		>
			<div class="common-layout">
				<el-container>
					<el-header>
						<!-- 上传图片 -->
						<el-button @click="upImage(item.name)" type="primary"
							>上传图片</el-button
						>
						<!-- 修改类目名称 -->
						<el-button @click="modCategory(item.name)" type="primary"
							>修改类目名称</el-button
						>
						<!-- 新增类目 -->
						<!-- <el-button @click="" type="primary"> 新增类目 </el-button> -->
						<el-button type="primary" @click="addCategory">新增类目</el-button>
						<!-- 删除类目 -->
						<el-button @click="delCategory(item.id)" type="danger">
							删除
						</el-button>
					</el-header>
					<el-main>
						<el-scrollbar height="58vh">
							<div class="demo-image">
								<div v-for="pic in picList" :key="pic.id" class="block">
									<!-- update_time -->
									<span class="demonstration">{{ pic.id }}</span>
									<el-image
										style="width: 100px; height: 100px"
										:src="url"
										fit="cover"
									/>
								</div>
							</div>
						</el-scrollbar>
					</el-main>
				</el-container>
			</div>
		</el-tab-pane>
	</el-tabs>
	<!-- 修改类目名称 -->
	<Drawer
		ref="modDrawer"
		@goDrawer="EDDrawer"
		title="修改类目名称"
		:size="'35%'"
	>
		<el-form
			ref="formRef"
			:model="repCategoryName"
			:rules="ruleCategoryName"
			label-width="120px"
			class="demo-form-inline"
		>
			<el-form-item prop="oldName">
				<el-input v-model="repCategoryName.oldName" placeholder="原分类名称" />
			</el-form-item>
			<el-form-item prop="newName">
				<el-input v-model="repCategoryName.newName" placeholder="新分类名称" />
			</el-form-item>
		</el-form>
	</Drawer>

	<!-- 上传图片@goDrawer="uplaodImge" -->
	<Drawer ref="upPicDrawer" title="上传图片" :size="'65%'" :showBtn="false">
		<el-upload
			class="upload-demo"
			drag
			action="/api/admin/"
			:on-success="upOk"
			:on-error="upOut"
			multiple
		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">
				Drop file here or <em>click to upload</em>
			</div>
			<template #tip>
				<div class="el-upload__tip">
					jpg/png files with a size less than 500kb
				</div>
			</template>
		</el-upload>
	</Drawer>
</template>

<script setup>
import { ref, reactive } from "vue";
import Drawer from "@/components/Drawer.vue";
import {
	getPicCategory,
	getPicList,
	setCategoryName,
	delCategoryName,
	addCategoryName,
} from "@/api/PicAsk.js";
import { open } from "@/utils/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { toast } from "@/utils/index.js";

// 定义响应式数据
// const title = ref("");
const picCategory = ref([]);
let picList = ref([]);
const activeTab = ref(168);

const repCategoryName = ref({
	oldName: "",
	newName: "",
});
const ruleCategoryName = reactive({
	newName: [
		{
			required: true,
			message: "请填写新分类名称",
			trigger: "blur",
		},
	],
	oldName: [
		{
			required: true,
			message: "请填写旧分类名称",
			trigger: "blur",
		},
	],
});

// 获取图片类目列表
getPicCategory()
	.then((res) => {
		picCategory.value = res.list;
	})
	.catch((err) => {
		console.log(err);
	});

// 删除指定的类
function delCategory(catId) {
	open("确认要删除该类别吗？")
		.then((res) => {
			picCategory.value.forEach((item, index) => {
				if (item.id === catId) {
					activeTab.value =
						index === picCategory.value.length - 1
							? picCategory.value[index - 1].id
							: picCategory.value[index + 1].id;
					picCategory.value.splice(index, 1);
				}
			});
			delCategoryName(catId);
		})
		.catch((error) => {
			console.log(error);
		});
}

setCategory(168);
function setCategory(catId) {
	activeTab.value = catId;
	getPicList(catId)
		.then((res) => {
			picList.value = res.list;
		})
		.catch((err) => {
			console.log(err);
		});
}

// 修改类目名称
const oldIptVal = ref("");
const modDrawer = ref(null);
function modCategory(oldna) {
	repCategoryName.value.oldName = oldna;
	modDrawer.value.openDrawer();
}
const formRef = ref(null);
// function setCategValiThen(id, newName) {
// 	setCategoryName(id, newName)
// 		.then((response) => {
// 			toast("修改成功");
// 		})
// 		.catch((err) => {
// 			toast("修改失败", "error");
// 		});
// }
function EDDrawer() {
	formRef.value
		.validate()
		.then((res) => {
			if (res) {
				if (repCategoryName.value.oldName !== repCategoryName.value.newName) {
					const index = picCategory.value.findIndex((item) => {
						return item.name === repCategoryName.value.oldName;
					});
					if (index !== -1) {
						setCategoryName(
							picCategory.value[index].id,
							repCategoryName.value.newName
						)
							.then((response) => {
								toast("修改成功");
								picCategory.value[index].name = repCategoryName.value.newName;
							})
							.catch((err) => {
								toast("修改失败", "error");
							});
					} else {
						toast("该分类名称不存在", "error");
					}
				} else {
					toast("新分类名称与原分类名称不可以相同", "error");
				}
			}
		})
		.catch((err) => {
			toast("填写错误", "error");
			console.log(err);
		});
}

// 上传图片
const upPicDrawer = ref(null);
function upImage() {
	upPicDrawer.value.openDrawer();
}

// 上传成功回调
function upOk(res) {
	toast("上传成功");
	console.log(res);
}
// 上传失败回调
function upOut(res) {
	toast("上传失败", "error");
	console.log(res);
}

// 新增类目
function addCategory() {
	ElMessageBox.prompt("请输入您要新增的图片类目名称", "", {
		confirmButtonText: "新增",
		cancelButtonText: "取消",
		inputPattern: /^.{2,8}$/,
		inputErrorMessage: "新增类目名称是2-8个字符",
	})
		.then(({ value }) => {
			open(`确认添加${value}图片类目吗？`)
				.then(() => {
					addCategoryName(value)
						.then((res) => {
							console.log(res);
							ElMessage({
								type: "success",
								message: `新增类目的名称是:${value}`,
							});
						})
						.catch((err) => {
							console.log(err);
						});
				})
				.catch((err) => {
					ElMessage({
						type: "info",
						message: "您已取消",
					});
				});
		})
		.catch(() => {
			ElMessage({
				type: "info",
				message: "您已取消",
			});
		});
}

// 图片
// const fits = ["fill", "contain", "cover", "none", "scale-down"];
const url =
	"http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/62af04afe39fa.jpg";
</script>

<style lang="less" scoped>
.el-header {
	background-color: #ecf5ff;
	display: flex;
	align-items: center;
}

// 图片

.demo-image .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	vertical-align: top;
}
.demo-image .block:last-child {
	border-right: none;
}
.demo-image .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
.el-form {
	margin: 0;
	padding: 0;
	.el-form-item {
		margin-bottom: 20px;
	}
}

.upload-demo {
	width: 100%;
}
</style>
